<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>选择门店</title>
	<meta name="decorator" content="blank"/>
    <style type="text/css">
    	.page-header {clear:both;margin:0 20px;padding-top:20px;}
		.the-icons {padding:25px 10px 15px;list-style:none;}
		.the-icons li {float:left;width:22%;line-height:25px;margin:2px 5px;cursor:pointer;}
		.the-icons i {margin:1px 5px;font-size:16px;} .the-icons li:hover {background-color:#efefef;}
        .the-icons li.active {background-color:#0088CC;color:#ffffff;}
        .the-icons li:hover i{font-size:20px;}
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
    	var allAreaChecks=$("input[name^='areaStore']");  
    	var checks=$("input[name='storeList']");
    
    	allAreaChecks.change(function() { 
	   		var me =this;
	   		var cks=eval("("+me.value+")");
            for(var i=0,length=checks.length;i<length;i++){
            	var boo=false;
            	var id=checks[i].value;
            	if(cks!=null&&cks.length>0){
            		for(var j=0,len=cks.length;j<len;j++){
                    	var ckId=cks[j];
                    	if(ckId==id){
                    		boo=true;
                    	}
                    }
            	}
            	if(boo){
            		checks[i].checked=me.checked;
            	}
            }
    	});
    	
    	checks.change(function(){
    		var me=this;
    		var checks=$("input[name='storeList']");
    		var allAreaChecks=$("input[name^='areaStore']");
    		if(!me.checked){//取消全选
    			for(var i=0,len=allAreaChecks.length;i<len;i++){
    				var areaStoreIds=(allAreaChecks[i].value).replace(/\s+/g,"");;
    				areaStoreIds=areaStoreIds.substring(1,areaStoreIds.length-1);
    				var areaStoreIdsList = areaStoreIds.split(',');
    				if($.inArray(me.value, areaStoreIdsList)>-1){
    					allAreaChecks[i].checked=me.checked;
    				}
    			}
    		}else{
    			for(var i=0,len=allAreaChecks.length;i<len;i++){
    				var areaStoreIds=(allAreaChecks[i].value).replace(/\s+/g,"");;
    				areaStoreIds=areaStoreIds.substring(1,areaStoreIds.length-1);
    				var areaStoreIdsList = areaStoreIds.split(',');
    				//todoo
    				for(var j=0,length=checks.length,autoCheck=0;j<length;j++){
    					
   						if($.inArray(checks[j].value, areaStoreIdsList)>-1&&checks[j].checked){
       						autoCheck=autoCheck+1;
       					}
    				if(autoCheck==allAreaChecks[i].value.split(",").length){
    					allAreaChecks[i].checked=me.checked;
    					//autoCheck=0;
    				}
    				}
    			}
    		}
		})
    });
    </script>
</head>
<body>
	<form:form id="storeSelectForm" modelAttribute="user"  class="form-horizontal">
		<c:forEach items="${allChecks}" var="storeArea">
		<br>
			<c:if test="${fn:length(storeArea.storeList)!=0}">
				<div id="areaStore">
					<input type="checkbox" name="areaStore" value="${storeArea.storeIds}">${storeArea.area}<br/>
					<form:checkboxes path="storeList" items="${storeArea.storeList}" itemLabel="cnName" itemValue="id"  /> 
					<br/><br/>
					<%-- <c:forEach items="${storeArea.storeList}" var="store">
					</c:forEach>  --%>
				</div>
			</c:if>
		</c:forEach>
<%-- 		<form:checkboxes path="storeList" items="${centerList}" itemLabel="cnName" itemValue="id" htmlEscape="false" class="required" />
 --%>		
		<br/><br/>
</form:form>
</body>